<template>
    <view>
        <!-- pages/search/index.wxml -->

        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>

        <!-- 搜索 -->
        <view class="search">
            <view class="search-input">
                <view class="search-input-img"><image :src="imgUrl + '/imgs/search.png'"></image></view>
                <view class="search-input-input"><input placeholder="搜索商品" @confirm="searchKeyword" @input="inputKeyword" /></view>
            </view>
            <view class="search-btn" @click="searchKeyword">搜索</view>
        </view>

        <!-- 热门搜索词 -->
        <view class="hot-keyword">
            <view class="hot-keyword-title" v-if="history.length > 0">
                历史记录
                <image class="hot-keyword-delete" @click="clearHistory" src="/static/assets/imgs/icon/delete.png"></image>
            </view>
            <view class="hot-keyword-list" v-if="history.length > 0">
                <view @click="keywordConfirm($event, { keyword: item.keyword })" :data-keyword="item.keyword" v-for="(item, index) in history" :key="index">{{ item.keyword }}</view>
            </view>
            <view class="hot-keyword-title">热门搜索</view>
            <view class="hot-keyword-list">
                <view @click="keywordConfirm($event, { keyword: item.keyword })" :data-keyword="item.keyword" v-for="(item, index) in hot" :key="index">{{ item.keyword }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
// pages/search/index.js
const Config = require('../../config/index.js');

const Api = require('../../api/index.js');

export default {
    components: {
        navber
    },
    data() {
        return {
            navbarData: {
                title: '搜索' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            keyword: '',
            //关键字
            hot: [],
            history: []
        };
    },
    onLoad(e) {
        this.getData();
        var history = uni.getStorageSync('clearHistory');

        if (history != '' && history != undefined) {
            history = JSON.parse(history);
            this.setData({
                history: history
            });
        }
    },
    onPullDownRefresh(e) {
        this.getData();
        uni.stopPullDownRefresh();
    },
    methods: {
        inputKeyword(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
             
            //关键字输入
            this.setData({
                keyword: e.detail.value
            });
        },

        clearHistory(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            var _this = this;

            uni.showModal({
                title: '提示',
                content: '是否要清除历史搜索记录',
                success: function (res) {
                    if (res.confirm) {
                        //这里是点击了确定以后
                        _this.setData({
                            history: []
                        });

                        uni.setStorageSync('clearHistory', '');
                    }
                }
            });
        },

        setKey(keyword) {
            var history = this.history;
            var is = 0;

            for (let key in history) {
                if (keyword == history[key].keyword) {
                    var item = history[0];
                    history[key] = item;
                    history[0] = {
                        keyword: keyword
                    };
                    is = 1;
                    break;
                }
            }

            if (is == 0) {
                history.push({
                    keyword: keyword
                });
                history = history.reverse();
            }

            this.setData({
                history: history
            });
            uni.setStorageSync('clearHistory', JSON.stringify(history));
        },

        searchKeyword(e, _dataset) {
            
            // if (!e.currentTarget) {
            //     if (_dataSet.tagId) {
            //         e.currentTarget = {
            //             id: _dataSet.tagId
            //         };
            //     } else {
            //         e.currentTarget = {
            //             dataset: _dataSet
            //         };
            //     }
            // }
            
            //确认搜索
            if (this.keyword == '') { 
                uni.showToast({
                    title: '请输入关键字',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            this.setKey(this.keyword);
            uni.navigateTo({
                url: '/pages/search/res/index?keyword=' + this.keyword
            });
        },

        keywordConfirm(e, _dataset) {
			console.log(e,_dataset);
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            //关键字确认
            this.setData({
                keyword: e.currentTarget.dataset.keyword
            });
            this.searchKeyword();
        },

        getData() {
            //获取数据
            Api.indexHotKeyword().then((res) => {
                this.setData({
                    hot: res.data
                }); // wx.stopPullDownRefresh();
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
